<!DOCTYPE html>
<html>

<head>

	<title> Add Volunteer </title>
	<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
    type="text/javascript"></script>
	<link rel=StyleSheet href="navbarstyle.css"/>
	<link rel=StyleSheet href="style.css"/> 
	<link rel=StyleSheet href="volunteerstyle.css"/>


	<script src="volunteerajax.js" type="text/javascript"></script>
	<script src="volunteerjavascript.js" type="text/javascript"></script>
	
	
    
</head>

<body>
	
	 <a class="logo" href="index.html" >
        <img id="logo" src="../images/Sankofacolorlogo.jpg"/>
        </a>

    <div id = "description"> <h1> Add a Volunteer</h1> <p>Below are fields corresponding to attributes of a new volunteer.  After you are done press submit to add the volunteer to the database.</p></div>

	<nav class="NavBar">
		<ul>
        	<li>
        		<a class= "Volunteer highlighted" href="volunteer.html"> Volunteers</a>
        		 <ul>
                    <li><a href="volunteer.html" title="Search"> Search </a></li>
                    <li><a href="addvolunteer.html" title="Edit"> Edit </a></li>
                </ul>
            </li>    
			<li>
				<a class= "Events" href="events.html"> Events</a>
				<ul>
					<li><a href="events.html" title="Search"> Search </a></li>
					<li><a href="addevents.html" title="Edit"> Edit </a></li>
				</ul>
			</li>

        	<li><a class= "Plants" href="plants.html"> Plants</a>
        		<ul>
					<li><a href="plants.html" title="Search"> Search </a></li>
					<li><a href="addplants.html" title="Edit"> Edit </a></li>
				</ul>
			</li>
			<li>
				<a class= "Source" href="source.html"> Source</a>
				<ul>
					<li><a href="source.html" title="Search"> Search </a></li>
					<li><a href="addsource.html" title="Edit"> Edit </a></li>
				</ul>
			</li>		
        </ul>
    </nav>


<!--    <div id="input_table" class="top_200" border="1">
    	<div id="volunteertable" class="table">
    		<div class="heading">
    			<div class="headingtitle col-1">Last Name</div>
    			<div class="headingtitle col-2">First Name</div>
    			<div class="headingtitle col-3">Age</div>
    			<div class="headingtitle col-3">Email</div>
    			<div class="headingtitle col-4">Gender</div>
    			<div class="headingtitle col-1">Race</div>
    			<div class="headingtitle col-2">Address</div>
    			<div class="headingtitle col-3">Phonenumber</div>
    			<div class="headingtitle col-4">Website</div>

	
	
    		</div>
    	
    		
			
				<div class="body">
					<div class="col-1">
						<input name="last_name1" id="vlastname1" type="text" value="" maxlength="256" size="30" /> 
					</div>

					<div class="col-2">
						<input name="first_name1" id="vfirstname1" type="text" value="" maxlength="256" size="30"/>
										
	         		</div>
					<div class="col-3">
						<input name="age1" id="vage1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="col-3">
						<input name="email1" id="vemail1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="col-4">
						<input name="vgender1" id="vgender1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="col-1">
						<input name="vrace1" id="vrace1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="col-2">
						<input name="vaddress1" id="vaddress1" type="text" value="" maxlength="256" size="30" /> 
					</div>
				
					<div class="col-3">
						<input name="vphonenumber1" id="vphonenumber1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="col-4">
						<input name="vwebsite1" id="vwebsite1" type="text" value="" maxlength="256" size="30" /> 
					</div>
	        </div>
	        
    	</div>
	</div> -->
		<div class="top-200">
		<button id="addbutton">Add</button>
  		<button id="submitbutton" onClick="saveinfo()">Submit</button>
    	<button id="clearbutton"> Clear</button>
    </div>

    	<div class ="insertinfo">
    		<div class="col-a">
    			<div class="row-1">Last Name</div>
    			<div class="row-2">First Name</div>
    			<div class="row-3">Age</div>
    			<div class="row-4">Email</div>
    			<div class="row-1">Gender</div>
    			<div class="row-2">Race</div>
    			<div class="row-3">Address</div>
    			<div class="row-4">Phone Number</div>
    			<div class="row-1">Website</div>
    		</div>

    		<div class="col-b">
    			<div class="row-1">
						<input name="last_name1" id="vlastname1" type="text" value="" maxlength="256" size="30" /> 
					</div>

					<div class="row-2">
						<input name="first_name1" id="vfirstname1" type="text" value="" maxlength="256" size="30"/>
										
	         		</div>
					<div class="row-3">
						<input name="age1" id="vage1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="row-4">
						<input name="email1" id="vemail1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="row-1">
						<input name="vgender1" id="vgender1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="row-2">
						<input name="vrace1" id="vrace1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="row-3">
						<input name="vaddress1" id="vaddress1" type="text" value="" maxlength="256" size="30" /> 
					</div>
				
					<div class="row-4">
						<input name="vphonenumber1" id="vphonenumber1" type="text" value="" maxlength="256" size="30" /> 
					</div>
					<div class="row-1">
						<input name="vwebsite1" id="vwebsite1" type="text" value="" maxlength="256" size="30" /> 
					</div>
    		</div>


    	</div>



</body>

</html>